<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<meta http-equiv="pragma" content="no-cache">
		<link rel="stylesheet" type="text/css" href="js/tools/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="js/tools/easyui/themes/icon.css">
		<script type="text/javascript" src="js/tools/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/tools/easyui/easyloader.js"></script>
		<script type="text/javascript" src="js/tools/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="js/tools/uploadFile.js"></script>
		<script type="text/javascript">
		   $(function(){
		       $("#dialog").dialog();
		       $("input[type='radio']").change(function(){
		          if($(this).val()==1)
		          {
		            $("#m1").show();
		            $("#m2").hide();
		          }else
		          {
		            $("#m1").hide();
		            $("#m2").show();
		          }
		       });
		   })
		   function addAd()
		   {
		       $("#add").show();
		       $("#modify").hide();
		       $('#dialog').dialog('open');
		      $("#image").val("http://");
		      $("#url").val("http://");
		      $("#title").val("");
		   }
		  function save()
		  {
		    var id=($(".img").size()+1);
		    var title=$.trim($("#title").val());
		    var url=$.trim($("#url").val());
		    var image=$.trim($("#image").val());
		     if(image.length=="")
		    {
		       alert("请上添加图片");
		       return false;
		    }
		    var param={};
		        param["ad.title"]=encodeURI(title);
		        param["ad.url"]=url;
		        param["ad.image"]=image;
		      param["ad.id"]=id;
		    $.getJSON("websiteConfiger!adAd.action",param,function(data){
		          if(data.info)
		          {
		             window.location.reload();
		          }
		    });
		  }
		  function deleteAd(id)
		  {
		       $.getJSON("websiteConfiger!deleteAd.action",{"ad.id":id},function(data){
		          if(data.info)
		          {
		             window.location.reload();
		          }
		    });
		  }
		  function showAd(id)
		  {
		      $("#add").hide();
		      $("#modify").show();
		      $("#id").val(id);
		      $("#image").val($("#img"+id).attr("src"));
		      $("#url").val($("#url"+id).attr("href"));
		      $("#title").val($("#title"+id).text());
		      $("#dialog").dialog("open");
		  }
		  function modifyAd()
		  {
		   var id=$("#id").val();
		    var title=$.trim($("#title").val());
		    var url=$.trim($("#url").val());
		    var image=$.trim($("#image").val());
		    if(image.length=="")
		    {
		       alert("请上添加图片");
		       return false;
		    }
		    var param={};
		        param["ad.title"]=encodeURI(title);
		        param["ad.url"]=url;
		        param["ad.image"]=image;
		      param["ad.id"]=id;
		    $.getJSON("websiteConfiger!modifyAd.action",param,function(data){
		          if(data.info)
		          {
		             window.location.reload();
		          }
		    });
		  }
		  //上传图片
			function uploadImage()
			{
				var file=$("#file").val();
				if(file=="")
				{
					alert("选择图片");
					return false;
				}
			          $.upload("image!uploadImage.action", {
			              "directory": "uploadfile/ad",
						  "base":  $("#base").val(),
			              "image": $("#file")
			          }, function (data) {
			             if(data.info!="error")
			             {
						 	$("#image").val(data.info);
						 	$("#apDiv").remove();
						 	var html="<div id='apDiv' style='position:absolute;width:158px;height:102px;z-index:1;left: 340px;top: 30px;'><img id='img' style='width:150px;height:100px;' src='"+data.info+"'></div>";
						 	$("#dialog").append(html);
							alert("上传成功");
			             }
			          });
			 }
		</script>
	<style>
		.tab {table-layout: fixed;font-size: 12px;}
		.tab tr {background-color: #F1F6F6;}
		.tab td {border: 1px solid #D9D9D9;color: black;padding: 2px;}
		#allTargs a {text-decoration: none;table-layout: fixed;font-size: 14px;margin-right: 8px;}
		#keyword a {text-decoration: none;table-layout: fixed;font-size: 14px;margin-right: 8px;}
		.img{float: left;align:center;}
		.img img{margin-right: 10px; margin-left: 10px;width: 150px; height: 100px;}
    </style>
	</head>
<body>
	       <input type="hidden" id="base" value="<%=basePath%>">
	       <table class="tab" style="width: 98%;" align="center">
	        <tr><td width="10%">
	        <s:if test="%{adList.size()<5}">
	           <button onClick="addAd()">添加</button>
	        </s:if>
	        </td><td></td></tr>
			<tr><td width="10%" colspan="2" id="count">
			  <s:iterator value="adList">
			    <div class="img"><a id="url<s:property value="id"/>" href="<s:property value="url"/>" target="_blank"><img id="img<s:property value="id"/>" src="<s:property value="image"/>"/></a><div style="align:center;" ><lable id="title<s:property value="id"/>"><s:property value="title"/></lable><a href="javascript:showAd(<s:property value="id"/>);">修改</a>&nbsp;<a href="javascript:deleteAd(<s:property value="id"/>);">删除</a></div></div>
			  </s:iterator>
			</td></tr>
		  </table>
		  <div id="dialog" title="图片" closed="true" style="width:520px;height:250px;text-align:left;padding-top: 45px;">
		    <input type="hidden" id="id" value="<s:property value="adList.size()+1"/>">
	        <table  align="center"   style="font-size: 12px;width:400px;">
				<tr><td width="20%">标题</td><td><input type="text" id="title" /></td></tr>
				<tr><td>URL:</td><td><input type="text" id="url" /></td></tr>
				<tr><td>方式</td><td><input type="radio" name="check" value="1" checked="checked"/>上传一张新的图片<input type="radio" name="check" value="2" />网络中图片</td></tr>
				<tr id="m1" ><td>选择图片:</td><td><input type="file" id="file"/><a href="javascript:uploadImage();">上传</a></td></tr>
				<tr id="m2" style="display:none;"><td>图片地址:</td><td><input type="text"  id="image" value="http://"/> </td></tr>
				<tr><td><input id="add" onClick="save()" type="button"  value="添加"/></td><td><input id="modify" onClick="modifyAd()" type="button" style="display:none;"  value="修改"/></td></tr>
		    </table>
  </div>
	</body>
</html>
